<template>
  <div class="layout-com">
    <header-com :options="header"></header-com>
    <nav-com @show-code="showCode" :path="path" :options="header"></nav-com>
    <banner-com  v-if="isIndex" :header="header.header"></banner-com>
    <con-com :isIndex="isIndex">
      <div slot="con">
        <transition v-if="isIndex" name="fade" mode="out-in">
          <router-view :key="key"></router-view>
        </transition>
        <section v-else class="section">
          <div class="row">
            <!--col col-md-3  d-none	d-sm-none d-md-none d-lg-block-->
            <div v-if="!isNullOrEmpty(nav)" class="content col col-md-4 col-lg-3  d-none	d-sm-none d-md-block d-lg-block">
              <tip-com :update="update" :subNav="nav"></tip-com>
            </div>
            <div :class="{'content col col-sm-12': true,'col-lg-12': isNullOrEmpty(nav),  'col-md-8 col-lg-9': !isNullOrEmpty(nav)}">
              <breadcrumb-nav :tip="tip"></breadcrumb-nav>
              <mobile-sub-nav-com class="d-block d-sm-block d-md-none d-lg-none"></mobile-sub-nav-com>
              <div class="detail">
                <transition name="fade" mode="out-in">
                  <router-view :options="header" @show-code="showCode" :key="key" @changeNav="changeNav" @changeTip="changeTip" :company="header.company" :departments="header.departments"></router-view>
                </transition>
              </div>
            </div>
          </div>
        </section>
      </div>
    </con-com>
    <bottom-com :options="header"></bottom-com>
    <flow-com
      v-if="isShowFlow"
      :company="header.company"
      :header="header.header"
      :isClose="isClose"
      @close="close"
      @show-code="showCode"
      @show-flow="showFlow"
    ></flow-com>
    <code-com :model="model" :company="header.company"></code-com>
  </div>
</template>

<script>
  import headerCom from "@/components/headerCom"
  import navCom from "@/components/navCom"
  import bannerCom from "@/components/bannerCom"
  import conCom from "@/components/conCom"
  import tipCom from "@/components/tipCom"
  import breadcrumbNav from "@/components/breadcrumbNav"
  import bottomCom from "@/components/bottomCom"
  import detaiTitleCom from "@/components/detaiTitleCom"
  import codeCom from "@/components/codeCom"
  import flowCom from "@/components/flowCom"
  import mobileSubNavCom from "@/components/mobileSubNavCom"
  import subNav from "@/datas/subNav"

  export default {
    props: [],
    computed: {
      key: function () {
        this.dlog('当前的路由', this.$route)
        this.subNav = this.$route
        if (this.$route.meta.name === 'index') {
          this.isIndex = true
        } else {
          this.isIndex = false;
        }

        this.getSubNav(this.$route.fullPath,subNav);

        return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
      }
    },
    data() {
      return {
        isShowFlow: true,
        tip:[],
        isIndex: false,
        subNav:{},
        nav:{},
        update:0,
        header: {
          company: {},
          header: {},
          footer: {},
          about:{},
          news: {}
        },
        show: true,
        model:{
          show:false
        },
        isClose:true,
        path:'home/index'
      }
    },
    components: {
      tipCom,
      headerCom,
      navCom,
      bannerCom,
      conCom,
      breadcrumbNav,
      bottomCom,
      detaiTitleCom,
      flowCom,
      codeCom,
      mobileSubNavCom
    },
    mounted() {
      console.log(this.$route)
      this.getHeader();
      let url = window.location.href;

      if (url.indexOf('zhongshan') > 0) {
        this.isShowFlow = false;
      }

    },
    methods: {
      changeNav(nav) {
        this.nav = nav;
        console.log('nav')
        console.log(nav)
        //发射nav
        this.cenetrCntrol.$emit('changeNav',nav);
        this.update++
      },
      changeTip(tip) {
        this.tip = tip
      },
      getSubNav(path,subNavData){
         this.path = path
      },
      getHeader() {

        this.getHttpObject()
          .setApi('header')
          .onSucc((res)=>{
            let data = res.data.data;
            this.dlog('收到的头部数据:')
            this.dlog(data)
            this.header = data
            this.setWebSite(data.company.ico,data.company.companyTitle)
          }).goAxios()
      },
      showCode(){
        this.model.show = true
      },
      close(){
        this.isClose = false
      },
      showFlow(){
        this.isClose = true
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .layout-com {
    .detail {
      background-color: #fff;
    }
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .layout-com {
      .section{
        .row{
          background-color: @white-color;
        }
      }
    }
  }


</style>
